'use client'

import 'bootstrap/dist/css/bootstrap.min.css';
import { motion } from "framer-motion";
import { Container, Image, Nav, Navbar } from 'react-bootstrap';
import { ScrollParallax } from 'react-just-parallax';
import 'swiper/css';
import 'swiper/css/bundle';
import { Autoplay } from 'swiper/modules';
import { Swiper, SwiperSlide } from 'swiper/react';
import './page.css';

const HoverShadow = function ({ children }: { children: React.ReactNode }) {
  return (
    <motion.div
      whileHover={{
        boxShadow: "0px 0px 20px rgba(0, 0, 0, 0.2)",
        scale: [1, 1.05],
      }}
    >
      {children}
    </motion.div>
  )
}

export default function Home() {
  return (
    <div>
      <div id='home'>
        <Navbar>
          <Navbar.Brand href="#home" id='logo-txt'>BETTAR</Navbar.Brand>
          <Navbar.Text>专注于企业高端网站建设</Navbar.Text>

          <Navbar.Collapse id="basic-navbar-nav">
            <Nav className="ms-auto">
              <Nav.Link href="#home">首页</Nav.Link>
              <Nav.Link href="#services">网站定制</Nav.Link>
              <Nav.Link href="#style">移动互联网</Nav.Link>
              <Nav.Link href="#">选择我们</Nav.Link>
            </Nav>
          </Navbar.Collapse>
        </Navbar>
        <Container>
          <Swiper
            id='slogan'
            modules={[Autoplay]}
            direction='vertical'
            autoplay={{ delay: 2000 }}
            loop
            slidesPerView={1}
          >
            <SwiperSlide>
              <h1>高端网站定制</h1>
              <p>专注于企业高端网站定制，建立高端品牌形象</p>
            </SwiperSlide>
            <SwiperSlide>
              <h1>数字化营销</h1>
              <p>品牌形象策划，数字形象设计</p>
            </SwiperSlide>
          </Swiper>
          <motion.div
            id='logo-center-motion'
            initial={{ opacity: 0 }}
            whileInView={{ y: -50, opacity: 1 }}
            transition={{ duration: 1 }}
          >
            <Image src="logo.png" alt='logo' id='logo-center' />
          </motion.div>
        </Container>
      </div>

      <Container id='feat'>
        <ul>
          <li className='feat-item'>
            <Image src="medal.png" alt='feat1' className='feat-icon' />
            <div>
              <h5>深耕20年</h5>
              <p>专业领域</p>
            </div>
          </li>
          <li className='feat-item'>
            <Image src="worldwide.png" alt='feat2' className='feat-icon' />
            <div>
              <h5>立足于上海</h5>
              <p>放眼世界</p>
            </div>
          </li>
          <li className='feat-item'>
            <Image src="support.png" alt='feat3' className='feat-icon' />
            <div>
              <h5>深耕20年</h5>
              <p>年轻化团队</p>
            </div>
          </li>
        </ul>
      </Container>
      <hr />

      <Container id='services'>
        <h2>我们提供的<strong>互联网服务</strong></h2>
        <ul>
          <HoverShadow>
            <li>
              <Image src="computer.png" alt='computer' />
              <h3>网站设计与开发</h3>
              <p>我们专业从事网站建设服务,采用最新的技术和创新的设计理念,为您打造卓越的在线展示平台,与国际接轨世界共鸣</p>
            </li>
          </HoverShadow>
          <HoverShadow>
            <li>
              <Image src="phone.png" alt='phone' />
              <h3>移动互联网制作</h3>
              <p>我们为您提供小程序开发服务,打造定制化,功能强大的移动应用,助力您实现业务增长和用户满意度提升</p>
            </li>
          </HoverShadow>
          <HoverShadow>
            <li>
              <Image src="promotion.png" alt='promotion' />
              <h3>数字化营销</h3>
              <p>提供数字营销解决方案,利用创新策略和技术提高品牌,在线曝光吸引客户,并实现业务增长</p>
            </li>
          </HoverShadow>
        </ul>
      </Container>
      <hr />

      <div id='style'>
        <div id='scroll1'>
          <ScrollParallax>
            <Image src='scroll2.png' alt='scroll2' id='scroll2' />
          </ScrollParallax>
        </div>
        <h2>匹配更加适合您的<strong>风格</strong></h2>
        <div id='scroll3'>
          <ScrollParallax>
            <Image src='scroll4.png' alt='scroll4' id='scroll4' />
          </ScrollParallax>
        </div>
      </div>

      <div id='creativity'>
        <Container id='creativity-header'>
          <h2>无限<strong>创意</strong></h2>
          <h2>无限<strong>灵感</strong></h2>
          <Image src='line.png' alt='line' id='line' />
        </Container>
        <Swiper
          id='examples'
          modules={[Autoplay]}
          autoplay={{ delay: 3000 }}
          loop
          slidesPerView={3.5}
        >
          <SwiperSlide>
            <Image src='example1.png' alt='example1' className='example-img' />
          </SwiperSlide>
          <SwiperSlide>
            <Image src='example2.png' alt='example2' className='example-img' />
          </SwiperSlide>
          <SwiperSlide>
            <Image src='example3.png' alt='example3' className='example-img' />
          </SwiperSlide>
          <SwiperSlide>
            <Image src='example4.png' alt='example4' className='example-img' />
          </SwiperSlide>
        </Swiper>
      </div>

      <div id='cooperate'>
        <h2>合作伙伴</h2>
      </div>
    </div >
  )
}   
